<template>
		<view class="gift-purchase">
      <view class="header" >
        <view><uni-status-bar></uni-status-bar></view>
  
        <view class="search-box flex-cn">
          <view class="navbar-left flex-cn" style="flex: 1" @click="backHome">
            <view
              style="width: 110rpx; text-align: center"
              class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
            >
            </view>
          </view>
  
          <view
              style="
                  height: 80rpx;
                  line-height: 80rpx;
                  font-size: 36rpx;
                  font-family: '.PingFang SC, PingFang SC';
                  display: flex;
                  justify-content: center;
                  align-content: center;
                  flex: 1;
                  color: #000;
                  font-weight: 600;
              "
              >
              我的礼品卡
              </view>
              <view style="width: 320rpx; flex: 1"></view>
          </view>   

		  <view class="tab-menu">
				<view :class="{ 'menu-item': true, 'active': activeIndex === 0 }" @click="selectTab(0)">待使用</view>
				<view :class="{ 'menu-item': true, 'active': activeIndex === 1 }" @click="selectTab(1)" >已充值</view>
				<view  :class="{ 'menu-item': true, 'active': activeIndex === 2 }" @click="selectTab(2)">已赠送</view>
				<view :class="{ 'menu-item': true, 'active': activeIndex === 3 }" @click="selectTab(3)">失效卡</view>
			</view>
      </view> 

	  	<view  style="background-color: #f6f6f6	;margin-bottom: 160rpx;">
			<view  class="viewa">共有<text>{{cards.length}}</text>个礼品卡</view>
		<view v-for="(item, index) in cards" :key="index" style="background-color: #fff; border-radius: 16rpx; margin: 16rpx;">
			<view class="viewb" >
				<!-- <image src="/static/images/gift_bg.png"></image> -->
				<view class="viewb_title" v-if="activeIndex !== 0">
					<image v-if="activeIndex == 1"  src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/663d794b9abd54634.png"></image>
					<image v-if="activeIndex == 2"  src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/663d794b9ce626485.png"></image>
					<image v-if="activeIndex == 3"  src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/663d794b987998577.png"></image>

					<!-- <text >{{ 
								activeIndex == 1 ? '已充值' : 
								activeIndex == 2 ? '已赠送' : 
								activeIndex == 3 ? '已失效' : 
								''  }}</text> -->
				</view>
				<view class="viewbInner" >

					<view style="margin: 24rpx;">
						<image style="width: 300rpx;height: 180rpx;" :src="item.img_url"></image>
					</view>
					<view class="use_gift">
						<view class="gift_type">【{{item.gift_card_class_name}}】</view>
						<view class="cardNum" >
							<text>
								卡号：{{    formatCardNumber(item.card_number ? item.card_number : 0)  }}
							</text>

							<view class="copy" @click.stop="copyText(item.card_number)">
								复制
							</view>

						</view>
						<view class="viewbInner1">面额：{{item.money}}</view>
						<view class="viewbInner2">时间：{{item.update_time}}</view>
					</view>

				</view>
			</view>

			<view class="cardButton" v-if="activeIndex == 0">
				<view style="color: #FFB73F;" @click.stop="Recharge(item.id)">余额充值</view>
				<button class="card_share" open-type="share" style="background-color: #FFB73F; color: #fff;" @tap.stop="onShare(item)">赠送好友</button>
				<!-- <button class="card_share"  style="background-color: #FFB73F; color: #fff;" @tap.stop="toCard(item)">测试</button> -->
			</view>
		</view>

		<qh-empty-data 
				v-if=" cards.length <= 0"
                text="暂无数据~" 
                width="238rpx" 
                height="216rpx" 
                :custom-style="{ marginTop: '40rpx' }"
                ></qh-empty-data>

		</view>
		<view class="limit_bottom">
        
            <view >
              <text style="color: #999;" @click="toCardOrder">礼品卡订单</text>
            </view>
        </view>
		
	</view>

</template>

<script>
import QhImage from '../../../../components/qh-image/qh-image.vue';
	// pages/mycard/mycard.js
	const app = getApp().globalData;

	export default {
		data() {
			return {
				cards: [],
				activeIndex:0,
				shareItem:null
				
			};
		},

		components: {QhImage},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {

		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		async onShow() {
			await this.fetchData(this.activeIndex)
		},
		
	
		// onShareAppMessage(res) {
		// 	var that = this;
		// 	var path = '/pages/mine/gift_card/gift_card?id=' + that.id + '&type=2&xcx_vid=' + that.xcx_vid +
		// 		'&store_id=' + this.$store.mallStoreId + '&share_uid=' + app.XcxData.userInfo.uid;
		// 	console.log(path);
		// 	return {
		// 		title: that.gift.money + '元' + that.gift.title + '礼品卡',
		// 		path: path,
		// 		imageUrl: that.gift.img_url
		// 	};
		// },
		
		onShareAppMessage(res) {
			let item = this.shareItem;
			// /pages/mine/gift_card/gift_card
			// var path = '/pages/mine/gift_card/gift_card?id=' + item.id + '&type=2&xcx_vid=' + item.xcx_vid +
			var path = '/pages/mer/tabbar/share_card/share_card?id=' + item.id + '&type=2&xcx_vid=' + item.xcx_vid +
				'&store_id=' + this.$store.mallStoreId + '&share_uid=' + app.XcxData.userInfo.uid;
			return {
				title: item.money + '元' + item.title + '礼品卡',
				path: path,
				imageUrl: item.img_url
			};
		},
		methods: {
			formatCardNumber(cardNumber) {
				return cardNumber.length > 5 ? "*****" + cardNumber.substring(cardNumber.length - 5) : cardNumber;
			},
			async fetchData(cardStatus) {
				const result = await this.$request(
				'/SmallProgramApi/ShiFu/getMyGiftCard',
				{ store_id: this.$store.mallStoreId, card_status: cardStatus }
				)
					this.cards = result.data ? result.data : [] ; // 更新数据
			},

			//电子卡订单页面
			toCardOrder(){
				uni.navigateTo({
					url: '/pages/mer/tabbar/orderCard/orderCard' 
				});
			},


			toCard(item){
				uni.navigateTo({
					url: '/pages/mer/tabbar/share_card/share_card?id=' + item.id + '&type=2&xcx_vid=' + item.xcx_vid +
				'&store_id=' + this.$store.mallStoreId + '&share_uid=' + app.XcxData.userInfo.uid
				});

			},
			card: function(e) {
				uni.navigateTo({
					url: '/pages/mine/gift_card/gift_card?id=' + e.currentTarget.dataset.id
				});
			},
			backHome() {
				uni.navigateBack();
			},
			//分享
			onShare(item){
				this.shareItem = item
			},

			//标签
			 selectTab(index) {
				this.activeIndex = index;
				this.cards = []
				 this.fetchData(index)
			},
			backHome() {
				uni.navigateBack();
			},

			copyText(val) {
				
				uni.setClipboardData({
					data: val, //你要复制的数据
					success: function() {
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			},
			//余额充值
			Recharge(id){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '充值到会员卡余额后,将无法在转赠给他人,确定充值吗？',
					showCancel: true,
					confirmColor: '#ff5c6d',
					success: function(res) {
						if (res.confirm) {
							getApp().globalData.sendRequest({
								url: '/GiftCard/giftSelfUse',
								type: "post",
								data: {
									id,
								},
								success: function(res) {
									if (res.status == 1) {
										uni.showToast({
											title: res.msg,
											duration: 1500,
											mask: true,
											success: function() {
												setTimeout(function() {
													that.fetchData();
												}, 1000);
											}
										});
									} else if (res.status == 2) {
										uni.showModal({
											title: '提示',
											content: '暂未绑定会员卡？',
											showCancel: true,
											confirmText: '去绑定',
											confirmColor: '#ff5c6d',
											success: function(res) {
												if (res.confirm) {
													uni.navigateTo({
														url: '/pages/mine/card/card'
													});
												}
											}
										});
										return;
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000,
											mask: true
										});
									}
								}
							});
						}
					}
				});

			},

			
		}
	};
</script>
<style>
	@import "./my_gift_mycard.css";
	.gift-purchase {
	height: 100vh;  
	overflow-y: auto;  
	width: 100%;
	/* background-color: #F0F2EE; */
	padding-bottom: 24rpx;
	}

	.card_share::after {
		border: none;
	}

	.limit_bottom{
		display: flex;
		align-items: center;
		justify-content:center;
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
		height: 100rpx;
		padding-bottom: env(safe-area-inset-bottom);
		background: #FFFFFF;
		box-shadow: 0rpx -8rpx 12rpx 2rpx rgba(22,38,0,0.04);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

/* .limit_bottom view:nth-child(2){
    margin: 24rpx;
    width: 149rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 57rpx;
    background: #FFB73F;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
} */


.bottom_title{
font-family: ".PingFang SC-Regular", Arial, sans-serif;
font-weight: 600;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
font-style: normal;
text-transform: none;
}
</style>
